<template>
  <a-checkbox-group v-model="value" :options="props.options" :direction="props.direction" :disabled="props.disabled" @change="handleChangeEvent($event)">
    <template v-for="(item, index) in props.data">
      <a-checkbox :value="item[props.fieldNames.value]">{{item[props.fieldNames.label] }}</a-checkbox>
    </template>
  </a-checkbox-group>
</template>

<script setup>
import { ref, watch } from 'vue'
const emit = defineEmits(['update:modelValue', 'change'])
const value = ref()

const props = defineProps({
  modelValue: { type: Array, default: () => [] },
  data: { type: Array, default: ()=>[] },
  disabled: { type: Boolean, default: false },
  direction: { type: String, default: 'horizontal' },
  options:{type:Object,},
  fieldNames:{type:Object,default:{value:'value',label:'title'}}
})

watch(
  () => props.modelValue,
  (vl) => {
    value.value = vl
    console.log('222',vl);
  },
  { immediate: true }
)
watch(
  () => value.value,
  (v) => {
    emit('update:modelValue', value.value)
  }
)

const handleChangeEvent = async (value) => {
  emit('change', value)
}
</script>
